<template>
  <div class="page gatheringAccountDel new-form-list">
    <div class="scroll-view">
      <!-- 富友的企业对私, 不显示'变更' -->
      <customHeader :middleTitle="middleTitle" v-if="data.channelType==7&&data.merchantType == '03' && merchantBankCardParamModel.accountType == '01'" @leftCallBack="handleBack"/>
      <customHeader
        :middleTitle="middleTitle"
        v-else
        rightTitle="变更"
        @rightCallBack="toChange"
        @leftCallBack="handleBack"
      />

      <div class="page-body">
        <!-- <div class="bg-ct">
          <div class="card-box">
            <div class="card">
              <div class="f-line">
                <span class="lft">{{data.bank2Open}}</span>
                <span class="rght">{{statusFormate(data.status)}}</span>
              </div>
              <div class="s-line">
                <span
                  v-for="(accountCode, index) in merchantBankCardParamModel.bankCardNoArr"
                  :key="index"
                >{{accountCode}}</span>
              </div>
              <div class="t-line">
                <span class="lft">{{merchantBankCardParamModel.bankCertName}}</span>
                <span class="zhk-detail_yl rght"></span>
              </div>
            </div>
          </div>
          <div class="b-status">
            <span class="lft">
              变更状态：
              <i
                :class="{'status-failed':changeStatus===1}"
              >{{changeStatusFormate(changeStatus)}}</i>
            </span>
            <a class="rght" @click="linkToChangeModel" v-if="changeStatus===1">查看</a>
          </div>
        </div> -->
        <div class="bg-ct account-info">
          <!-- <div class="tt">结算账号信息</div> -->
          <div class="row">
            <span class="label">商户号</span>
            <span class="val">{{merchantId}}</span>
          </div>
          <div class="row">
            <span class="label">账户类型</span>
            <span class="val">{{accountTypeFormate(merchantBankCardParamModel.accountType)}}</span>
          </div>
          <div
            class="row"
            v-if="merchantBankCardParamModel.accountType=='01'&&data.merchantType!='01'"
          >
            <span class="label">结算账户</span>
            <span
              class="val"
            >{{settleAccountsTypeFormate(merchantBankCardParamModel.settleAccountsType)}}</span>
          </div>
          <div
            class="row"
            v-if="!(merchantBankCardParamModel.accountType=='01'&&data.merchantType=='02')&&data.merchantType!='01'"
          >
            <span class="label">开户许可证照片</span>
            <span class="val">
              <img :src="imgUrl(merchantDetailModel.yzIndustryLicensePhoto)" alt>
            </span>
          </div>
          <div
            class="row"
            v-if="merchantBankCardParamModel.settleAccountsType==2&&data.merchantType!='01'"
          >
            <span class="label">非法人结算证明照片</span>
            <span class="val">
              <img :src="imgUrl(merchantDetailModel.yzImgUnincorporated)" alt>
            </span>
          </div>
          <div class="row">
            <span class="label">开户名</span>
            <span class="val">{{merchantBankCardParamModel.bankCertName}}</span>
          </div>
          <template
            v-if="merchantBankCardParamModel.accountType=='01'&&merchantBankCardParamModel.settleAccountsType==2&&data.merchantType!='01'"
          >
            <div class="row">
              <span class="label">身份证号</span>
              <span class="val">{{merchantBankCardParamModel.certNo}}</span>
            </div>
            <div class="row">
              <span class="label">身份证有效期</span>
              <span
                class="val"
              >{{merchantBankCardParamModel.merchantIdExpireStart&&merchantBankCardParamModel.merchantIdExpire?this.changeMoment(merchantBankCardParamModel.merchantIdExpireStart)+"~"+this.periodToDate(merchantBankCardParamModel.merchantIdExpireStart,merchantBankCardParamModel.merchantIdExpire):""}}</span>
            </div>
            <div class="row">
              <span class="label">结算人身份证正面</span>
              <span class="val">
                <img :src="imgUrl(merchantDetailModel.yzImgPrivateIdcardA)" alt>
              </span>
            </div>
            <div class="row">
              <span class="label">结算人身份证背面</span>
              <span class="val">
                <img :src="imgUrl(merchantDetailModel.yzImgPrivateIdcardB)" alt>
              </span>
            </div>
          </template>
          <div class="row">
            <span class="label">银行账号</span>
            <span class="val">{{merchantBankCardParamModel.bankCardNo}}</span>
          </div>
          <div class="row">
            <span class="label">开户银行</span>
            <span class="val">{{merchantBankCardParamModel.bankCode}}</span>
          </div>
          <div class="row">
            <span class="label">开户行所在地区</span>
            <span
              class="val"
            >{{merchantBankCardParamModel.branchProvinceName?merchantBankCardParamModel.branchProvinceName+"-"+merchantBankCardParamModel.branchCityName:""}}</span>
          </div>
          <div class="row">
            <span class="label">支行名称</span>
            <span class="val">{{merchantBankCardParamModel.branchName}}</span>
          </div>

          <div class="row">
            <span class="label">联行号</span>
            <span class="val">{{merchantBankCardParamModel.contactLine}}</span>
          </div>
          <div class="row" v-if="merchantBankCardParamModel.accountType=='01'">
            <span class="label">银行卡正面照</span>
            <span class="val">
              <img :src="imgUrl(merchantDetailModel.yzImgBankcardA)" alt>
            </span>
          </div>
          <div class="row">
            <span class="label">银行预留手机号</span>
            <span class="val">{{merchantBankCardParamModel.accountPhone}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import { Toast, MessageBox } from "mint-ui";
import jsBridge from "../../tools/jsBridge";
import localStorageClient from "../../js/localstorage.js";
import config from "../../base/profile/config.json";
import moment from "moment";

export default {
  name: "gatheringAccountDel",
  data() {
    return {
      from: "", //从哪个页面跳转过来的
      shopId: "",
      merchantId: "",
      middleTitle: "",
      data: {},
      merchantBankCardParamModel: {
        bankCardNoArr: []
      },
      merchantDetailModel: {},
      changeStatus: "" // (0,"初始状态"),(1,"失败"),(2,"审核中"),(3,"成功")
      //status(0:未开通,1:已开通,2:已冻结),3申请中 4已关闭 5开通失败
      //channelType:7(富友) 8(乐刷)
    };
  },
  methods: {
    //使用年限和日期转换
    periodToDate(start,deal){
      const startDate = moment(start).format('YYYY-MM-DD');
      if(startDate && deal){
        if(deal == '29991231'){
          return '长期';
        }else{
          return moment(startDate.replace(/-/g,"/")).add(deal,'years').format('YYYY-MM-DD');
        }
      }
      return
    },
    changeMoment(date){
      return moment(date).format('YYYY-MM-DD');
    },
    handleBack() {
      if (this.from == "SMSVerification") {
        this.$router.go(-2);
      } else {
        this.$router.back();
      }
    },
    //开通状态显示
    statusFormate(status) {
      let s = "";
      if (status == 0) {
        s = "未开通";
      } else if (status == 1) {
        s = "已开通";
      } else if (status == 2) {
        s = "已冻结";
      } else if (status == 3) {
        s = "审核中";
      } else if (status == 4) {
        s = "已关闭";
      } else if (status == 5) {
        s = "开通失败";
      }
      return s;
    },
    //变更状态
    changeStatusFormate(status) {
      let s = "未知";
      if (status == 0) {
        s = "未变更";
      } else if (status == 1) {
        s = "变更失败";
      } else if (status == 2) {
        s = "变更审核中";
      } else if (status == 3) {
        s = "变更成功";
      }
      return s;
    },
    //跳转去变更页面
    toChange() {
      if(this.changeStatus === undefined||this.changeStatus === ''){
        Toast("未获取到变更状态");
        return;
      }
      if(this.changeStatus == '2'){
        Toast("变更结算信息正在审核中");
        return;
      }
      this.checkAccountInfo();
    },
    jumpChangeSettlementOrChangeModel(){
      if(this.changeStatus == '1'){
        // this.$router.push({
        //   path:
        //     "/storeManage/gatheringManage/gatheringAccountDel/changeSettlementAccount",
        //   query: {
        //     shopId: this.shopId,
        //     merchantId: this.merchantId,
        //     mType:this.data.merchantType,
        //     failChange: "1",
        //   }
        // });
        this.linkToChangeModel();
      }else{
        this.$router.push({
          path:
            "/storeManage/gatheringManage/gatheringAccountDel/changeSettlementAccount",
          query: {
            shopId: this.shopId,
            merchantId: this.merchantId,
            source:2//从结算帐号跳转到结算帐号变更页
          }
        });
      }
    },
    checkAccountInfo(){
      this.ajax({
        type: "get",
        url: `/newapp/AppMerchant/checkAccountInfo.do?shopId=${this.shopId}&merchantId=${this.merchantId}`,
        controlLoading: true
      })
        .then(res => {
          if (res.success && res.resultObject) {
            debugger
            if(res.resultObject.mergeAccount){
              if(res.resultObject.mainShop){
                MessageBox({
                  title: "",
                  message: "门店为合并打款总门店，结算账号变更后将同步修改其他门店结算资料，是否确认修改？",
                  showCancelButton: true,
                  confirmButtonText: "修改",
                  closeOnClickModal: false
                }).then(action => {
                  if (action == "confirm") {
                    this.jumpChangeSettlementOrChangeModel();
                  }
                });
              }else{
                MessageBox({
                  title: "",
                  message: "门店已申请与其他门店合并结算，无法单独变更结算账户",
                  showCancelButton: false,
                  confirmButtonText: "知道了",
                  closeOnClickModal: false
                })
              }
            }else{
              this.jumpChangeSettlementOrChangeModel();
            }
          }else {
            Toast(res.msg);
          }
        })
        .catch(err => {

        });
    },
    //查看变更收款账号
    linkToChangeModel() {
      this.$router.push({
        path:
          "/storeManage/gatheringManage/gatheringAccountDel/gatheringAccountDelChange",
        query: {
          mType: this.data.merchantType,
          merchantId: this.merchantId,
          settleAccountsType: this.merchantBankCardParamModel.settleAccountsType
        }
      });
    },
    //拼接图片路径
    imgUrl(url) {
      return config.previewUrlPrefix + "" + url;
    },
    //账号类型
    accountTypeFormate(accountType) {
      let r = "";
      if (accountType == "01") {
        r = "对私账户";
      } else if (accountType == "02") {
        r = "对公账户";
      }
      return r;
    },
    //结算账户
    settleAccountsTypeFormate(settleAccountsType) {
      let r = "";
      if (settleAccountsType == 1) {
        r = "法人";
      } else if (settleAccountsType == 2) {
        r = "非法人";
      }
      return r;
    },
    initModel() {
      this.ajax({
        type: "get",
        url: `newapp/AppMerchant/getBankCardInfo.do?shopId=${
          this.shopId
        }&merchantId=${this.merchantId}`,
        controlLoading: true
      })
        .then(res => {
          if (res.success && res.resultObject) {
            this.data = res.resultObject;
            this.merchantBankCardParamModel =
              res.resultObject.merchantBankCardParamModel;
            this.merchantDetailModel = res.resultObject.merchantDetailModel;
            const bankCardNo = this.merchantBankCardParamModel.bankCardNo;
            let bankCardNoArr = [];
            for (let i = 0; i < bankCardNo.length; i += 4) {
              bankCardNoArr.push(bankCardNo.substr(i, 4));
            }
            this.merchantBankCardParamModel.bankCardNoArr = bankCardNoArr;
            this.merchantBankCardParamModel.settleAccountsType =
              res.resultObject.settlementType;
            if(this.merchantBankCardParamModel.accountType == '02'){
              this.merchantBankCardParamModel.settleAccountsType = 1;
            }
          }else if(res.code == -1000){
             localStorageClient.remove("sms");
             Toast("短信校验已失效，请重新校验");
             this.$router.back();
          }
          else {
            Toast(res.msg);
          }
        })
        .catch(err => {

        });
    },
    //查询变更信息
    getChangeModel() {
      this.ajax({
        type: "get",
        url: "/newapp/AppMerchant/getChangeModel.do?merchantId=" + this.merchantId,
        controlLoading: true
      })
        .then(res => {
          if (res.success) {
            let changeModel=res.resultObject;
            if (changeModel&&changeModel['changeStatus']==1) {
              sessionStorageClient.putJSON("changeModel", changeModel);
            }
            this.changeStatus = changeModel.changeStatus;
          } else {
            Toast(res.msg);
          }
        })
        .catch(err => {
  
        });

    }
  },

  created() {
    this.shopId = this.$route.query.shopId;
    this.merchantId = this.$route.query.merchantId;
    this.middleTitle = "结算账号";
    this.initModel();
    this.getChangeModel();
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.from = from.name;
    });
  },
  components: {
    customHeader
  }
};
</script>
  <style lang='scss' scoped>
@import "gatheringAccountDel";
</style>
